<template>
	<!-- 他人主页 -->
	<view class="index-personaldetail">
		<scroll-view scroll-y="true">
			<view class="index-personaldetail-banner">
				<view class="index-personaldetail-banner-top" v-if="!is_user">
					匹配度50%
				</view>
				<view class="index-personaldetail-banner-top" v-else>
					编辑
				</view>
				<view class="index-personaldetail-banner-bottom u-flex">
					<view class="index-personaldetail-banner-bottom-left">
						{{ homePage.signatures || '' }}
					</view>
					<view class="index-personaldetail-banner-bottom-right" @click="jumpEgg()">
						<image
							src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/egg.png"
							mode=""></image>
					</view>
				</view>
				<image class="index-personaldetail-banner-img" :src="homePage.cover" mode="widthFix">
				</image>
				<!-- <image class="index-personaldetail-banner-img"
					src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/demo1.png" mode="widthFix">
				</image> -->
			</view>
			<view class="index-personaldetail-info">
				<view class="index-personaldetail-info-item shadow-box">
					<view class="index-personaldetail-info-item-header u-flex u-row-between"
						style="border-bottom: 1rpx solid #F5F5F5FF;">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								{{userinfo.nickname}}
							</view>
							<image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/vip-icon.png"
								style="margin-right: 8rpx;width: 80rpx;height: 32rpx;" mode="">
							</image>
							<view class="vip-level">
								Lv1
							</view>
							<image v-if="userinfo.is_real == 1"
								src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/id-check.png"
								style="width: 92rpx;height: 36rpx;" mode=""></image>
						</view>
						<view class="index-personaldetail-info-item-header-right" @click="ShiEid()" v-if="!is_user">
							举报/屏蔽
						</view>
						<view class="btns" @click="jumpPersonalDataPage()" v-else>
							<image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/btn/60x28.png"
								mode=""></image>
							<view class="btns-con">
								编辑
							</view>
						</view>
					</view>
					<view class="index-personaldetail-info-item-main u-flex">
						<view class="index-personaldetail-info-item-main-item u-flex" v-for="(item, index) in infolist"
							:key="index">
							<view class="index-personaldetail-info-item-main-item-icon">
								<image :src="item.icon" mode="" style="display: block;"></image>
							</view>
							<view class="index-personaldetail-info-item-main-item-title">
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>
				<view class="index-personaldetail-info-item shadow-box identification">
					<view class="index-personaldetail-info-item-header u-flex u-row-between">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								V认证：{{ realnum }}/6
							</view>
						</view>
						<view class="index-personaldetail-info-item-header-right u-flex u-row-center">
							<image
								src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-pre.png"
								style="width: 24rpx;height: 24rpx;" mode=""></image>
							<view class="">
								真实度：{{ (realnum / 6 * 100).toFixed(0) }}%
							</view>
						</view>
					</view>
					<view class="index-personaldetail-info-item-main u-flex">
						<view class="index-personaldetail-info-item-main-item u-flex" v-for="(item, index) in reallist"
							:key="index">
							<view class="index-personaldetail-info-item-main-item-icon">
								<image :src="item.is_check ? item.icon_s : item.icon_n" mode=""></image>
							</view>
							<view class="index-personaldetail-info-item-main-item-title">
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>
				<!-- 动态 -->
				<view class="index-personaldetail-info-item shadow-box" @click="jumpTrends()">
					<view class="index-personaldetail-info-item-header u-flex u-row-between">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								TA的动态
							</view>
						</view>
						<view class="index-personaldetail-info-item-header-right u-flex u-row-center">
						</view>
					</view>
					<view class="index-personaldetail-info-item-main u-flex u-row u-flex-nowrap"
						style="flex-wrap: nowrap;">
						<view class="index-personaldetail-info-item-main-item u-flex" v-for="(item, index) in trends"
							:key="index">
							<view class="index-personaldetail-info-item-main-item-img">
								<image :src="item.content.images[0]"
									style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" mode="aspectFill">
								</image>
								<!-- <image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/demo1.png"
									style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" mode=""></image> -->
							</view>
						</view>
						<view class="index-personaldetail-info-item-arrow" v-if="trends.length > 3">
							<image
								src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/arrow-right.png"
								style="width: 40rpx;height: 40rpx;" mode="">
							</image>
						</view>
					</view>
				</view>
				<!-- 关于我 -->
				<view class="index-personaldetail-info-content shadow-box">
					<view class="index-personaldetail-info-content-header">
						关于我
					</view>
					<view class="index-personaldetail-info-content-item">
						<view class="index-personaldetail-info-content-item-title u-flex">
							<image
								src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/title-icon.png"
								style="width: 16rpx;height: 16rpx;margin-right: 12rpx;" mode=""></image>
							<view class="">
								自我介绍
							</view>
						</view>
						<view class="index-personaldetail-info-content-item-main">
							<view class="">
								{{ homePage.introduce || '' }}
							</view>
							<!-- <image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/demo.png"
								mode="widthFix"></image> -->
						</view>
					</view>
					<view class="index-personaldetail-info-content-item">
						<view class="index-personaldetail-info-content-item-title u-flex">
							<image
								src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/title-icon.png"
								style="width: 16rpx;height: 16rpx;margin-right: 12rpx;" mode=""></image>
							<view class="">
								家庭背景
							</view>
						</view>
						<view class="index-personaldetail-info-content-item-main">
							<view class="">
								{{ homePage.family_background || '' }}
							</view>
							<!-- <image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/demo.png"
								mode="widthFix"></image> -->
						</view>
					</view>
					<view class="index-personaldetail-info-content-item">
						<view class="index-personaldetail-info-content-item-title u-flex">
							<image
								src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/title-icon.png"
								style="width: 16rpx;height: 16rpx;margin-right: 12rpx;" mode=""></image>
							<view class="">
								理想的TA
							</view>
						</view>
						<view class="index-personaldetail-info-content-item-main">
							<view class="">
								{{ homePage.ideal || '' }}
							</view>
							<!-- <image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/demo.png"
								mode="widthFix"></image> -->
						</view>
					</view>
				</view>
				<!-- 标签 -->
				<view class="index-personaldetail-info-item tags shadow-box">
					<view class="index-personaldetail-info-item-header u-flex u-row-between">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								标签
							</view>
						</view>
						<view class="index-personaldetail-info-item-header-right u-flex u-row-center">

						</view>
					</view>
					<view class="index-personaldetail-info-item-main">
						<view class="index-personaldetail-info-item-main-item u-flex" v-for="(item, index) in label"
							:key="index">
							{{ item.labelInfo.name }}
						</view>
					</view>
				</view>
				<!-- MBTI测试 -->
				<view class="index-personaldetail-info-item mbtitest shadow-box">
					<view class="index-personaldetail-info-item-header u-flex u-row-between">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								MBTI测试
							</view>
						</view>
						<view class="index-personaldetail-info-item-header-right u-flex u-row-center">

						</view>
					</view>
					<view class="index-personaldetail-info-item-main">
						<view class="index-personaldetail-info-item-main-item u-flex" style="width: 100%;">
							测试结果：{{ info.MBTI }}
						</view>
						<!-- <view class="index-personaldetail-info-item-main-item u-flex" style="width: 100%;">
							这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案
						</view> -->
					</view>
				</view>
			</view>
			<view class="index-personaldetail-float" v-if="!is_user">
				<view class="index-personaldetail-float-item" @click="changePointPop()">
					<image
						src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/point.png"
						style="height: 96rpx;width: 96rpx;" mode=""></image>
				</view>
				<view class="index-personaldetail-float-item">
					<image @click="follow()"
						src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/care.png"
						style="height: 96rpx;width: 96rpx;" mode=""></image>
				</view>
			</view>
			<view class="index-personaldetail-footer u-flex u-row-between u-row-center">
				<view class="index-personaldetail-footer-item public-btn  u-flex u-row-between u-row-center"
					style="background: #66ACFFFF;" @click="">
					<view class="index-personaldetail-footer-item-left">
						<image
							src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-good.png"
							mode="" style="display: block;margin-right: 8rpx;"></image>
					</view>
					<view class="index-personaldetail-footer-item-right">
						推给朋友
					</view>
				</view>
				<view class="index-personaldetail-footer-item public-btn  u-flex u-row-between u-row-center"
					style="background: #7266FFFF;" @click="addFriend()">
					<view class="index-personaldetail-footer-item-left">
						<image
							src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-like.png"
							mode="" style="display: block;margin-right: 8rpx;"></image>
					</view>
					<view class="index-personaldetail-footer-item-right">
						想认识TA
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup mode="center" v-model="showPointPop" border-radius="20">
			<index-personal-getpoint></index-personal-getpoint>
		</u-popup>
	</view>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	import indexPersonalGetpoint from '../../../components/index-personal-getpoint/index-personal-getpoint.vue'
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: {},
		// 局部注册的组件,import引入的组件需要注入到对象中才能使用
		components: {
			indexPersonalGetpoint
		},
		// 组件状态值
		data() {
			return {
				showPointPop: false,
				infolist: [{
					id: 0,
					title: '97年',
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-birth.png'
				}, {
					id: 1,
					title: '175cm',
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-tall.png'
				}, {
					id: 2,
					title: '65',
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-heavy.png'
				}, {
					id: 3,
					title: '所在杭州',
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-adress.png'
				}, {
					id: 4,
					title: '家乡上海',
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-home.png'
				}, {
					id: 5,
					title: '',
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-edu.png'
				}, {
					id: 6,
					title: '',
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-job.png'
				}, {
					id: 7,
					title: '',
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-pay.png'
				}, ],
				reallist: [{
						is_check: false,
						icon_n: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-edu-def.png',
						icon_s: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-edu-check.png',
						title: '实名认证'
					},
					{
						is_check: false,
						icon_n: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-job-def.png',
						icon_s: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-job-check.png',
						title: '工作认证'
					},
					{
						is_check: false,
						icon_n: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-personal-def.png',
						icon_s: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-personal-check.png',
						title: '学历认证'
					},
					{
						is_check: false,
						icon_n: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-build-def.png',
						icon_s: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-build-check.png',
						title: '房产认证'
					},
					{
						is_check: false,
						icon_n: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-car-def.png',
						icon_s: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-car-check.png',
						title: '车辆认证'
					},
					{
						is_check: false,
						icon_n: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-like-def.png',
						icon_s: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/psonaldetail/ta-like-check.png',
						title: '亲友认证'
					},
				],
				id: '',
				info: {},
				userinfo: {},
				information: {},
				homePage: {},
				label: [],
				trends: [],
				realnum: 0,
				is_user: false, // true 自己 false 别人
			}
		},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		onLoad(option) {
			console.log(option)
			this.id = option.id
			console.log(this.$utils.getCache('userinfo'), '')
			if (this.$utils.getCache('userinfo')) {
				let userinfo = JSON.parse(this.$utils.getCache('userinfo'))
				if (userinfo.id == this.id) {
					this.is_user = true
					uni.setNavigationBarTitle({
						title: '个人主页'
					})
				}
			}
			this.getDetail()
		},
		// 组件方法
		methods: {
			// 获取详情
			getDetail() {
				this.$http('config.homePage', {
					token: uni.getStorageSync('token'),
					uuid: this.id
				}, '').then(res => {
					console.log(res, '详情')
					console.log(this.$utils.getCache('userinfo'))

					this.userinfo = res.data.userinfo
					this.information = res.data.information
					this.homePage = res.data.homePage
					this.label = res.data.label
					this.trends = res.data.trends
					this.info = res.data

					// 生日or年龄
					this.infolist[0].title = this.information.age || '-'
					// 身高
					this.infolist[1].title = this.information.height ? this.information.height + 'cm' : '-'
					// 体重
					this.infolist[2].title = this.information.weight ? this.information.weight + 'kg' : '-'
					// 地址
					this.infolist[3].title = this.information.now_home ? '所在' + this.information.now_home : '-'
					// 家乡
					this.infolist[4].title = this.information.home ? '家乡' + this.information.home : '-'
					// 学历
					this.infolist[5].title = this.information.education || '-'
					// 职业
					this.infolist[6].title = this.information.job || '-'
					// 收入
					this.infolist[7].title = this.information.income || '-'


					if (this.userinfo.is_real !== 0) {
						this.realnum += 1
						this.reallist[0].is_check = true
					}
					// 车辆认证了认证数量加一
					if (this.userinfo.car_real !== 0) {
						this.realnum += 1
						this.reallist[1].is_check = true
					}
					// 房产认证了认证数量加一
					if (this.userinfo.room_real !== 0) {
						this.realnum += 1
						this.reallist[2].is_check = true
					}
					// 学历认证了认证数量加一
					if (this.userinfo.education_real !== 0) {
						this.realnum += 1
						this.reallist[3].is_check = true
					}
					// 工作认证了认证数量加一
					if (this.userinfo.work_real !== 0) {
						this.realnum += 1
						this.reallist[4].is_check = true
					}
					// 亲友认证了认证数量加一
					if (this.userinfo.parent_real !== 0) {
						this.realnum += 1
						this.reallist[5].is_check = true
					}
				})
			},


			jumpTrends() {
				this.$Router.push({
					path: '/pages/index/index/index-personal-trends?id='+this.userinfo.id
				})
			},
			jumpEgg() {
				this.$Router.push({
					path: '/pages/index/index/index-personal-egg'
				})
			},
			changePointPop() {
				this.showPointPop = true
			},
			// 屏蔽
			ShiEid() {
				this.$http('user.ShiEid', {
					shield: this.userinfo.id
				}).then(res => {
					console.log(res, 'aslkdjlaskjdlk')
					this.$utils.toast(res.info)
				})
			},
			// 关注
			follow() {
				this.$http('config.follow', {
					token: uni.getStorageSync('token'),
					follow: this.userinfo.id
				}).then(res => {
					console.log(res, 'aslkdjlaskjdlk')
					this.$utils.toast(res.info)
				})
			},
			// 想认识他
			addFriend() {
				this.$http('apply.addFriend', {
					token: uni.getStorageSync('token'),
					friend: this.userinfo.id
				}).then(res => {
					console.log(res, 'aslkdjlaskjdlk')
					this.$utils.toast(res.info)
				})
			},
			// 跳转到个人资料页面
			jumpPersonalDataPage() {
				this.$Router.push({
					path: '/pages/mine/personal-data/personal-data'
				})
			},
		},

		// 以下是生命周期钩子   注：没用到的钩子请自行删除
		/**
		 * 在实例初始化之后，组件属性计算之前，如data属性等
		 */
		beforeCreate() {},
		/**
		 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
		 */
		created() {},
		/**
		 * 在挂载开始之前被调用：相关的 render 函数首次被调用。
		 */
		beforeMount() {},
		/**
		 * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
		 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
		 */
		mounted() {},
		/**
		 * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
		 * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
		 */
		beforeUpdate() {},
		/**
		 * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
		 * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
		 */
		updated() {},
		/**
		 * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
		 */
		activated() {},
		/**
		 * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
		 */
		deactivated() {},
		/**
		 * 实例销毁之前调用。在这一步，实例仍然完全可用。
		 */
		beforeDestroy() {},
		/**
		 * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
		 * 所有的事件监听器会被移除，所有的子实例也会被销毁。
		 */
		destroyed() {}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<style scoped lang="scss">
	.btns {
		width: 120rpx;
		height: 56rpx;
		position: relative;

		image {
			width: 120rpx;
			height: 56rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		&-con {
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 56rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FCFDFF;
			position: relative;
		}
	}

	.dui {
		width: 32rpx;
		height: 32rpx;
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.index-personaldetail {
		background: #FAFAFAFF;
		height: 100%;

		&-banner {
			position: relative;
			overflow: hidden;

			&-img {
				width: 100%;
				display: block;
			}

			&-top {
				position: absolute;
				right: 32rpx;
				top: 32rpx;
				height: 72rpx;
				text-align: center;
				padding: 0 32rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 41rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				color: #FFFFFF;
				line-height: 72rpx;

			}

			&-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				height: 96rpx;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);

				&-left {
					margin-left: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				&-right {
					image {
						width: 132rpx;
						height: 56rpx;
					}
				}
			}
		}

		&-info {
			padding: 32rpx;

			.vip-level {
				background: url(https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/level-bg.png);
				background-size: cover;
				margin-right: 8rpx;
			}

			&-item {
				padding: 32rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #2E3033;
				margin-right: 8rpx;
				margin-bottom: 40rpx;

				&-header {
					padding-bottom: 32rpx;


					&-left {
						&-item {}
					}

					&-right {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
					}
				}

				&-main {
					flex-wrap: wrap;

					// &-item:nth-of-type(3n-1) {
					// 	justify-content: center;
					// }

					// &-item:nth-of-type(3n) {
					// 	justify-content: flex-end;
					// }
					// &-item:nth-of-type(3n-2) {
					// justify-content: flex-start;
					// }

					&-item {
						margin-top: 32rpx;
						width: 33%;

						&-icon {
							width: 40rpx;

							image {
								width: 28rpx;
								height: 28rpx;
							}
						}

						&-title {
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #2E3033;
						}
					}


				}
			}

			&-content {
				padding: 32rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #2E3033;
				margin-right: 8rpx;
				margin-bottom: 40rpx;
				background: #F8F9FE;

				&-header {
					margin-bottom: 32rpx;
				}

				&-item {
					margin-bottom: 32rpx;

					&-title {
						margin-bottom: 32rpx;
					}
				}
			}

			.identification {
				.index-personaldetail-info-item-header-right {
					position: relative;
					right: -32rpx;
					text-align: center;
					color: #FF516D;
					width: 220rpx;
					height: 40rpx;
					background: #F5F5F5;
					border-radius: 20rpx 0rpx 0rpx 20rpx;
				}

				.index-personaldetail-info-item-main {
					&-item {
						flex-direction: column;

						&-icon {
							width: 96rpx;

							image {
								width: 96rpx;
								height: 96rpx;
							}
						}
					}
				}

			}

			.tags {
				.index-personaldetail-info-item-main {}

				.index-personaldetail-info-item-main-item {
					padding: 0 32rpx;
					margin-top: 16rpx;
					width: auto;
					margin-right: 16rpx;
					display: inline-block;
					height: 48rpx;
					background: #F1EFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #7266FF;
					text-align: center;
					line-height: 48rpx;
				}
			}
		}

		&-float {
			position: fixed;
			right: 32rpx;
			bottom: 120rpx;

			&-item {
				margin-bottom: 32rpx;
			}
		}

		&-footer {
			position: relative;
			padding: 0 70rpx;
			padding-bottom: 70rpx;

			&-item {
				width: 280rpx;
				height: 96rpx;
				justify-content: center;

				image {
					height: 32rpx;
					width: 32rpx;
				}

				&-right {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FCFEFF;
				}
			}
		}
	}
</style>